<template>
    <view class="body" >
        <view class="logo">
            <image src="@/static/index/header.png" mode="heightFix‌"></image>
        </view>
        <view class="content">
            <view class="list">
                <view class="menu">
                    <view class="menu-item">
                        <image src="@/static/index/manual.png" ></image>
                        <navigator url="/pages/index/index" class="menu-item-active">上机手册</navigator>
                    </view>
                    <view class="menu-item">
                        <image src="@/static/index/device.png" mode="aspectFit"></image>
                        <navigator url="/pages/faq/faq">设备推荐</navigator>
                    </view>
                    <view class="menu-item">
                        <image src="@/static/index/code.png" mode="aspectFit"></image>
                        <navigator url="/pages/about/about">科技代码</navigator>
                    </view>
                    <view class="menu-item">
                        <image src="@/static/index/recommend.png" mode="aspectFit"></image>
                        <navigator url="/pages/about/about">推荐上机</navigator>
                    </view>
                    <view class="menu-item">
                        <image src="@/static/index/business.png" mode="aspectFit"></image>
                        <navigator url="/pages/about/about">精选业务</navigator>
                    </view>
                </view>

                <view class="notice">
                    <view class="title">公告：</view>
                    <view class="message">11111111111111111111111111111111111111</view>
                </view>

                <view class="income">
                    <view class="title">收益概览</view>
                    <view class="income-row">
                        <view class="income-item">
                            <view class="income-value red">0.00</view>
                            <view class="income-title">昨日收益</view>
                        </view>
                        <view class="income-item">
                            <view class="income-value">0.00</view>
                            <view class="income-title">本周收益</view>
                        </view>
                        <view class="income-item">
                            <view class="income-value">0.00</view>
                            <view class="income-title">本月收益</view>
                        </view>
                        <view class="income-item">
                            <view class="income-value">0.00</view>
                            <view class="income-title">累计收益</view>
                        </view>
                    </view>
                </view>

                <view class="income node">
                    <view class="title">节点概览</view>
                    <view class="income-row">
                        <view class="income-item blue">
                            <view class="income-value">0.00</view>
                            <view class="income-title">所有</view>
                        </view>
                        <view class="income-item green">
                            <view class="income-value">0.00</view>
                            <view class="income-title">在线</view>
                        </view>
                        <view class="income-item grey">
                            <view class="income-value">0.00</view>
                            <view class="income-title">离线</view>
                        </view>
                        <view class="income-item yellow">
                            <view class="income-value">0.00</view>
                            <view class="income-title">异常</view>
                        </view>
                    </view>
                </view>

            </view>
            
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { checkLogin } from '@/utils/auth'
import { showToast } from '@/utils/auth';


onLoad(() => {
    //登录验证
    checkLogin()
})
onShow(() => {
  // 触发数据变化或强制刷新
})
</script>

<style lang="scss">
.body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    background-color: #f8f8f8;

}

.logo {
    width: 750rpx;
    height: 516.15rpx;
    image{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.content {
    position: absolute;
    width: 750rpx;
    top: 441.67rpx;
    left: 0;
    .list{
        background-color: #f8f8f8;
        border-radius: 40rpx 40rpx 0 0;
        padding: 52.6rpx 33rpx 0 33rpx;
        .menu {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            .menu-item {
                width: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                image {
                    width: 74.48rpx;
                    height: 82.29rpx;
                    margin-bottom: 18.23rpx;
                }
                navigator {
                    color: #332C2B;
                    font-size: 25rpx;
                }
            }
        }
        .notice {
            margin-top: 57.29rpx;
            padding: 23rpx 32rpx;
            border: 1px solid #D2D2D2;
            color: #332C2B;
            background-color: #FFFFFF;
            border-radius: 15rpx;
            display: flex;
            .title {
                padding-right: 10rpx;
            }
            .message {
                white-space: nowrap;      /* 禁止换行 */
                overflow: hidden;         /* 隐藏溢出内容 */
                text-overflow: ellipsis;  /* 显示省略号 */
                width: 480rpx;            /* 需设置固定宽度 */
            }
        }

        .income{
            padding: 25rpx 0;
            .title {
                background-image: url('@/static/index/income.png');
                background-size: cover;
                background-repeat: no-repeat;
                height: 54.01rpx;
                padding-left: 74rpx;
                color: #332C2B;
                font-size: 34.9rpx;
                font-weight: Bold;
            }
            .income-row{
                display: flex;
                margin-top: 20rpx;
                justify-content: center;
                background-color: #FFFFFF;
                padding: 39rpx 0;
                border-radius: 15rpx;
                .income-item {
                    width: 141.35rpx;
                    height: 141.35rpx;
                    text-align: center;
                    border: 1px solid #8E8E8E;
                    border-radius: 15rpx;
                    margin: 0 10rpx;
                    display: flex;
                    flex-direction: column;
                    flex-wrap:wrap;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                    .income-value {
                        color: #332C2B;
                        font-size: 30.49rpx;
                    }
                    .income-title {
                        color: #8E8E8E;
                        font-size: 24.39rpx;

                    }
                    .red{
                        color: #FB551C;
                    }
                }
                
                .blue{
                    border-color: #33B3ED;
                    .income-value {
                        color: #33B3ED;
                        font-size: 30.41rpx;
                        font-weight: bold;
                    }
                    .income-title {
                        color: #33B3ED;
                        font-size: 24.33rpx;
                    }
                }
                .green{
                    color: #4EBD60;
                    .income-value {
                        color: #4EBD60;
                        font-size: 30.41rpx;
                        font-weight: bold;
                    }
                    .income-title {
                        color: #4EBD60;
                        font-size: 24.33rpx;
                    }
                }
                .grey{
                    color: #979797;
                    .income-value {
                        color: #979797;
                        font-size: 30.41rpx;
                        font-weight: bold;
                    }
                    .income-title {
                        color: #979797;
                        font-size: 24.33rpx;
                    }
                }
                .yellow{
                    color: #F5AD33;
                    .income-value {
                        color: #F5AD33;
                        font-size: 30.41rpx;
                        font-weight: bold;
                    }
                    .income-title {
                        color: #F5AD33;
                        font-size: 24.33rpx;
                    }
                }

            }
        }
    }

}


</style>
